<template>
	<div class="toFlbt">
		<div class="lb">
			<van-swipe :autoplay="3000" @change="onChange">
				<van-swipe-item v-for="(image, index) in images" :key="index">
					<img v-lazy="image" />
				</van-swipe-item>
				<template #indicator>
					<div class="custom-indicator">{{ current + 1 }}/5</div>
				</template>
			</van-swipe>
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
	data() { 
		return {
			images: [
				'https://gw.alicdn.com/imgextra/i4/O1CN01aLbn6O1sJGCwrCB80_!!6000000005745-2-tps-1035-219.png_790x10000.jpg_.webp',
				'https://gw.alicdn.com/imgextra/i4/O1CN01tgx8Yl1OSw673i9oM_!!6000000001705-0-tps-1035-219.jpg_790x10000Q75.jpg_.webp',
				'https://gw.alicdn.com/imgextra/i4/O1CN01aLbn6O1sJGCwrCB80_!!6000000005745-2-tps-1035-219.png_790x10000.jpg_.webp',
				'https://gw.alicdn.com/imgextra/i2/O1CN01J2VhTM1PEZIHdKMFN_!!6000000001809-0-tps-1035-219.jpg_790x10000Q75.jpg_.webp',
				'https://gw.alicdn.com/imgextra/i4/O1CN01aLbn6O1sJGCwrCB80_!!6000000005745-2-tps-1035-219.png_790x10000.jpg_.webp',
			],
			current: 0,
		}
	},
	methods: {
		onChange(index) {
			this.current = index;
		},
	},
}
</script>

<style scoped>
.toFlbt {
box-sizing: border-box;
padding: .25rem;
margin-top: 10px;
margin-left: -5px;
}
::v-deep .van-swipe {
	width: 100%;
	height: 1.46rem;
		/* border: 1px solid transparent; */
}
 /* ::v-deep .van-swipe-item{
border: 1px solid transparent;
 } */
img {
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

.lb {
	height: 1.46rem;
	width: 6.9rem;
	margin-left: .13rem;
	border-radius: .3rem;
}
		  .custom-indicator {
			width: .55rem;
			height: .3rem;
			text-align: center;
	  	position: absolute;
	  	right: .2rem;
	  	bottom: .15rem;
	  	padding: 2px 5px;
	  	font-size: 12px;
			color: white;
	  	background: rgba(0, 0, 0, 0.742);
			border-radius: .3rem;	
			border: 1px solid transparent;
	  }
</style>